<template>
  <div class="skill">
    <div class="box">
      <div class="left">
        <div class="title">{{ item.title }}</div>
        <div class="footer">
          <span>{{ item.created_at | filetname }}</span>
          <div class="num">
            <span class="iconfont">&#xe644;</span>
            <span>{{ item.read }}</span>
            <span class="iconfont">&#xe638;</span>
            <span>{{ item.star }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <img :src="baseURL + item.cover" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item'],
  data () {
    return {
      baseURL: process.env.VUE_APP_BASEURL
    }
  }
}
</script>
<style lang="less" scoped>
.skill {
  background-color: #fff;
  padding: 0 15px;
  padding-bottom: 39px;

  .box {
    display: flex;
    // height: 69px;
    .left {
      flex: 1;
      display: flex;
      // align-items: center;
      justify-content: space-between;
      flex-direction: column;
      .title {
        flex: 1;
        opacity: 1;
        font-size: 16px;
        font-weight: 600;
        color: #181a39;
        line-height: 1.25em;
      }
      .footer {
        opacity: 1;
        font-size: 12px;
        font-weight: 400;
        color: #b4b4bd;
        // line-height: 17px;
        display: flex;
        justify-content: space-between;
        // margin-top: 20px;
        // line-height: 1em;
        // align-items: flex-end;
        line-height: 0.8em;

        .num {
          display: flex;
          padding-right: 10px;
          align-items: flex-end;
          span {
            margin-left: 10px;
            // vertical-align: 6px;
          }
        }
      }
    }
    .right {
      img {
        // margin-left: 10px;
        width: 113px;
        height: 80px;
        display: block;
        // object-fit: contain;
      }
    }
  }
}
</style>
